<template>
  <div class="table-container">
    <div class="search-form">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="页面名称">
          <el-input v-model="searchForm.pageName" placeholder="请输入页面名称" clearable />
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="searchForm.title" placeholder="请输入标题" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-section">
      <div class="table-header">
        <el-button type="success" @click="handleAdd">新增</el-button>
      </div>
      <el-table 
        :data="tableData" 
        style="width: 100%"
        border
        stripe
        highlight-current-row
        show-overflow-tooltip
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold',
          fontSize: '14px',
          height: '40px'
        }"
        :cell-style="{
          padding: '8px 0',
          fontSize: '14px'
        }"
        height="calc(100vh - 150px)"
        v-loading="loading"
      >
        <el-table-column prop="pageName" label="页面名称" width="180" />
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="content" label="内容"/>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <PageNoteDialog
    v-model:visible="dialogVisible"
    :edit-data="currentEditData"
    @success="handleDialogSuccess"
  />
  <PageNoteDetail
    v-model:visible="detailVisible"
    :id="currentDetailId"
  />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { pageNoteModel, type PageNote } from './pageNoteModel'
import PageNoteDialog from './PageNoteDialog.vue'
import PageNoteDetail from './PageNoteDetail.vue'

const searchForm = reactive({
  pageName: '',
  title: ''
})

const tableData = ref<PageNote[]>([])
const loading = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取列表数据
const getList = async () => {
  try {
    loading.value = true
    const query = {
      pageName: searchForm.pageName,
      title: searchForm.title,
      current: currentPage.value,
      pageSize: pageSize.value
    }
    const res = await pageNoteModel.getPageNoteList(query)
    tableData.value = res.records
    total.value = res.total
  } catch (error) {
    console.error('获取列表失败:', error)
  } finally {
    loading.value = false
  }
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  getList()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getList()
}

const handleSearch = () => {
  currentPage.value = 1
  getList()
}

// 初始化加载数据
onMounted(() => {
  getList()
})

// 对话框相关
const dialogVisible = ref(false)
const currentEditData = ref<PageNote>()

const handleAdd = () => {
  currentEditData.value = undefined
  dialogVisible.value = true
}

const handleEdit = (row: PageNote) => {
  currentEditData.value = { ...row }
  dialogVisible.value = true
}

const handleDelete = (row: PageNote) => {
  ElMessageBox.confirm(
    '确定要删除这条记录吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      loading.value = true
      await pageNoteModel.deletePageNote(row.id!)
      getList() // 重新加载列表
    } catch (error) {
    } finally {
      loading.value = false
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}

const handleDialogSuccess = () => {
  getList() // 重新加载列表
}

// 详情相关
const detailVisible = ref(false)
const currentDetailId = ref<number>()

</script>

<style scoped>
.table-container {
  padding: 5px;
}

.search-form {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-section {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 5px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
}

.table-header {
  margin-bottom: 10px;
}

.el-form-item {
  margin-bottom: 5px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 5px;
}

:deep(.el-form-item__label) {
  padding-right: 5px;
}

:deep(.el-input__wrapper) {
  padding: 0 5px;
}

:deep(.el-button) {
  padding: 5px 10px;
}

:deep(.el-table__row) {
  transition: all 0.3s;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}

:deep(.el-table__row.current-row) {
  background-color: #ecf5ff !important;
}

:deep(.el-button--primary.is-link) {
  font-weight: 500;
}

:deep(.el-button--danger.is-link) {
  font-weight: 500;
}

.pagination-container {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  padding: 5px 0;
}
</style>
